//标签详情列表组件，专题详情页的左侧列表组件
<template>
  <div class="page-containter">
    <div class="page-content">
      <div class="content-left">
        <div class="search-box">
          <!-- 标题 -->
          <div class="search-header">
            <h4 class="search-name">
              当前标签：<span class="search-keyword">【<b class="search-b">{{ tag_name }}</b>】</span>
            </h4>
            <span class="article-count">共 {{ tag_article_count }} 篇</span>

          </div>
          <!-- 简介 -->
          <div class="search-description">
            <p> {{ tag_description || "暂无描述" }}</p>
          </div>
        </div>
        <div class="search-content" v-if="tag_articles.length">
          <ArticleOrder
              :active-value="activeTab"
              @tab-change="handleTabChange"
          />
          <ArticleList
              :articles="tag_articles"
              :loading="loading"
              :error="error"
          />
          <ArticlePagination
              :currentPage="currentPage"
              :page_size="pageSize"
              :totalItems="totalItems"
              :totalPages="totalPages"
              @page-change="handlePageChange"
          />
        </div>
        <div class="search-content" v-else><p>该标签下暂无文章,请选择其他标签！！！</p></div>
      </div>
      <div class="content-right">
        <TagList/>
        <RandomArticleList/>
        <CategoryArticleCard/>
        <FriendLinkCard/>
      </div>
    </div>
  </div>

</template>


<script setup>
import ArticleList from "@/components/articles/ArticleList.vue";
import ArticleOrder from "@/components/articles/ArticleOrder.vue";
import ArticlePagination from "@/components/articles/ArticlePagination.vue";
import TagList from "@/components/articles/card/TagList.vue";
import CategoryArticleCard from "@/components/articles/card/CategoryArticleCard.vue";
import RandomArticleList from "@/components/articles/card/RandomArticleList.vue";
import FriendLinkCard from "@/components/com/FriendLinkCard.vue";

// 获取当前路由的查询参数
const route = useRoute();
const router = useRouter();
const tag_id = route.params.id;// 获取当前标签
const activeTab = ref("time"); // 默认排序方式
const tag_articles = ref([]); // 文章列表数据
const tag_name = ref(""); // 标签名称
const tag_description = ref(""); // 标签描述
const tag_article_count = ref(0); // 标签文章数量

// 页码相关
const currentPage = ref(1)
const pageSize = ref(1) // 每页条数
const totalPages = ref(0) // 总页数
const totalItems = ref(0) // 总条数
const loading = ref(false) // 是否正在加载
const error = ref(null) // 错误信息

// 获取当前标签的文章列表
const getTagArticles = () => {
  loading.value = true;
  error.value = null;
  axios.get("/api/cms/tags/" + tag_id + "/get_articles", {
    params: {
      order_by: activeTab.value,
      page: currentPage.value,
    }
  }).then(res => {
    tag_articles.value = res.data.results;
    pageSize.value = res.data.page_size;
    currentPage.value = res.data.page;
    totalPages.value = res.data.total_pages;
    totalItems.value = res.data.count;
    loading.value = false;
  }).catch(err => {
    loading.value = false;
    error.value = err.message;
  });
};
// 文章分页切换
const handlePageChange = (page) => {
  currentPage.value = page;
  getTagArticles();
};
//获取当前标签详情
const getTagDetail = () => {
  axios.get("/api/cms/tags/" + tag_id).then(res => {
    tag_name.value = res.data.name;
    tag_description.value = res.data.description;
    tag_article_count.value = res.data.article_count;
    router.push({
      name: "tag-detail",
      params: {
        id: tag_id,
      },
      query: {title: res.data.name}
    });
  });
};

// 标签排序方式切换
const handleTabChange = (tabId) => {
  activeTab.value = tabId;
  currentPage.value = 1;
  getTagArticles();
  ; // 清空旧数据并重新获取数据
};

//生命周期函数，页面加载完成后执行
onMounted(() => {
  getTagDetail();
  getTagArticles();
});
// 监听路由变化，切换标签时重新获取数据
watch([activeTab, currentPage], getTagArticles, {immediate: true})
</script>


<style scoped>
.content-left, .content-right {
  margin-top: 50px;

}

.search-box {
  background: var(--search-bg-color, #fff);
  border-radius: 8px;
  border: 1px solid #e2e6eb;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-family: Arial, sans-serif;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}


.search-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--search-title-color);
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--search-border-color, #17a2b8);
}

.search-keyword {
  color: var(--search-keyword-color, #17a2b8);
}

.search-keyword b {
  color: var(--search-keyword-b-color, #5fb878);
  font-weight: bold;
}

.article-count {
  font-size: 14px;
  color: #999;
}

/* 描述区域样式 */
.search-description {
  padding: 0.8rem 0;
  color: var(--search-text-color, #343a40);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  background: var(--search-bg-color, #fff);;
}
</style>
